<template>
    <div class="app-container">
        <!-- {{ searchInfo }} -->
        <Form v-if="showSearch" v-model:formData="searchInfo" :formItems="formItems">
            <template #footer>
                <div style="text-align: left">
                    <el-button size="small" icon="Search" type="primary" @click="goSearch">搜素</el-button>
                    <el-button size="small" icon="Refresh" @click="resetSearch">重置</el-button>
                </div>
            </template>
        </Form>
        <h3></h3>
        <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5"> </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="resetSearch"
        ></right-toolbar>
      </el-row> -->
        <h3></h3>
        <x-table v-loading="loading" :propList="propList" :tableData="info.items">
            <template #imgs="{ row }">
                <!-- :preview-src-list="row.img_arr" -->
                <el-image :src="img" v-for="img in row.img_arr"  :key="img" alt="" style="width: 100px; height: 100px" @click="onImg(row)"/>
                <!-- <el-image style="width: 150px; height: 150px" :src="item" v-for="item in curItem.img_arr"
                :key="item" ></el-image> -->
            </template>
            <template #status="{ row }">
                <el-tag v-if="row.status == 1">待处理</el-tag>
                <el-tag type="success" v-if="row.status == 2">已处理</el-tag>
            </template>
            <template #op="{ row }">
                <el-button v-hasPermi="['member:suggest:reply']" type="primary" link icon="Position"
                    @click="lookImg(row)">回复消息</el-button>
                <!-- <el-button type="primary"
  link icon="Position" @click="reply(row)"
            >回复</el-button
          > -->
                <el-button v-hasPermi="['member:suggest:changeStatus']" type="primary" link icon="Edit"
                    @click="handelSuccess(row)">处理完成</el-button>
            </template>
        </x-table>
        <pagination v-show="info.total > 0" :total="info.total" v-model:page="searchInfo.pageNum"
            v-model:limit="searchInfo.pageSize" @pagination="getInfo" />
        <Dialog width="30%" title="详情" v-model:isShowDialog="isShowDialog" center @confirm="confirmReply"
            confirmText="确定回复">
            <div style="text-align: center">
                <p style="font-weight: bold; color: #333; font-size: 17px">
                    投诉内容：<span>{{ curItem.content }}</span>
                </p>
                <div>
                    <p style="color: #f00">{{ curItem.img_arr.length }}张图片</p>
                    <el-image style="width: 150px; height: 150px" :src="item" v-for="item in curItem.img_arr"
                        :key="item" :preview-src-list="imgs"></el-image>
                </div>
                <p style="color: #f00">超过48小时未回复无法发送消息</p>
                <p style="display: flex; justify-content: center">
                    <span style="width: 60px">回复:</span>
                    <el-input :rows="4" type="textarea" placeholder="请输入回复内容" v-model="replyInfo.msg"></el-input>
                </p>
            </div>
        </Dialog>
        <!-- <Dialog
        width="30%"
        title="投诉回复"
        v-model:isShowDialog="isShowDialog2"
        center
      >
        <div style="text-align: center">
          <p style="font-weight: bold; color: #333; font-size: 17px">
            投诉内容：<span>{{ curItem.content }}</span>
          </p>
          <p style="display: flex; justify-content: center">
            <span style="width: 60px">回复:</span>
            <el-input
              :rows="4"
              type="textarea"
              placeholder="请输入回复内容"
              v-model="replyInfo.msg"
            ></el-input>
          </p>
        </div>
      </Dialog> -->


      <el-dialog title="图片" v-model="isShowDetail" width="300px" :center="true">
        <el-image
            v-for="item in curImgs"
          :src="item"
          style="width: 200px; height: 200px; margin: 10px auto"
          :preview-src-list="curImgs"
        ></el-image>
        <!-- <span #footer class="dialog-footer"> </span> -->
      </el-dialog>
    </div>
</template>

<script>
import { propList, formItems } from "./config";
import { getAllList as listAllCustomer } from "@/api/platform/merchant";

import { getList, changeStatus, reply } from "@/api/platform/suggesstion";
export default {
    name: "platformsuggestionindex",
    data() {
        return {
            replyInfo: {
                msg: "",
            },
            isShowDetail: false,
            curImgs :[],
            isShowDialog2: false,
            curItem: {},
            showSearch: true,
            isShowDialog: false,
            propList,
            formItems,
            loading: false,
            info: {},
            searchInfo: {
                pageNum: 1,
                pageSize: 10,
                created_at: this.getTimeFilterDefault2(30, true),
            },
        };
    },
    computed: {},
    created() {
        this.init();
    },
    mounted() { },
    methods: {
        init() {
            this.getInfo();
            this.getCustomerList();

        },
        getCustomerList() {
            listAllCustomer().then((response) => {
                // this.customerList = response.data;
                this.formItems.forEach(item => {
                    if (item.prop == 'sys_user_id') {
                        item.options = response.data
                    }
                })
            });
        },
        async getInfo() {
            this.loading = true;
            const params = { ...this.searchInfo };
            const { data } = await getList(params);
            this.info = data;
            this.loading = false;
        },
        
        onImg(item) {
            this.curImgs = item.img_arr;
            this.isShowDetail = true;
        },
        reply(item) {
            this.curItem = item;
            this.isShowDialog2 = true;
            this.replyInfo.msg = "";
        },
        confirmReply() {
            // this.$message.success("huifu");
            if (!this.replyInfo.msg) {
                this.$message.error("请输入回复内容");
                return false;
            }
            const params = {
                id: this.curItem.id,
                msg: this.replyInfo.msg,
                mp_user_id: this.curItem.mp_user_id,
            };
            reply(params)
                .then((res) => {
                    console.log(res);
                    this.replyInfo.msg = "";
                    this.isShowDialog = false;
                    this.getInfo();
                    this.$message.success("发送成功");
                })
                .catch((err) => {
                    // this.$message.error("发送失败");
                    console.log(err);
                });
        },
        lookImg(item) {
            this.curItem = item;
            this.imgs = item.img_arr;
            this.isShowDialog = true;
        },
        handelSuccess(item) {
            this.$modal
                .confirm("是否标记昵称为【" + item.user.nickname + "】的投诉为已完成？")
                .then(function () {
                    // return delChannelGroup(dictIds);
                    const params = {
                        id: item.id,
                        status: 2,
                    };
                    return changeStatus(params);
                })
                .then(() => {
                    this.getInfo();
                    this.$modal.msgSuccess("操作成功");
                })
                .catch(() => { });
        },
        resetSearch() {
            this.searchInfo = this.$options.data.call(this).searchInfo;
            this.searchInfo.created_at = this.getTimeFilterDefault2(30, true);
            this.getInfo();
        },
        goSearch() {
            // 重置时间
            this.getInfo();
        },
    },
};
</script>

<style lang="scss" scoped></style>